Day18 AC 履歷表#3

簡單小語

剛好切到這個版面時學習了基礎Github，因此也把連結放上來，算是小小練習，這個版面一看到就非常吸引我，原因到現在都不知道哈哈，不過現在有慢慢養成一看到版面，就要先想結構如何撰寫，RWD陳列也需考慮，這次主要不要新增太多class，反而是用相同class去達到相同樣式，可以精簡程式碼(不過好像還是很髒就是)，善用選取器(感謝Amos老師)，可以省去很多class命名，也可以精準選到自己要選的項目，AC課程的練習就到這囉，接下來朝六角學院課程，刻意練習。

筆記分享

1. width的控制，padding的使用，讓排版推移及位置空間有一致性。
2. font-awesome物件的位置，不知道為何都靠左，因此故意用padding往左多推了一點。
3. 這次的border-bottom不用偽元素製作，位置算好，padding推移精確，就可以直接用啦。
4. 內容的font-awesome則是使用padding向外推後，再用偽元素超出長寬20%製作外框原型。
5. 製作中線時原本要用.fas做但發現高度不足，因此改用.item製作整條中線。
6. 穿透時利用各種z-index去判斷顯示順序， .icon .fas::after設成z-index: -1;， .item::after設成z-index: -2。
7. 很久沒寫JQuery加了一個點擊事件，讓點擊到的.item部份物件變色，並會移除silbings的效果。
8. 利用大量的flex排版(怎麼辦float都不熟)，熟悉關念，加強應用。
9. 相同的class但不同的tag就能避免樣式重複，<div class=”describe”>，<ul class=”describe”>。
10. 點擊事件用.item.active “欲改變物件”，即可以讓JQuery撰寫精簡許多。

刻意練習

Practice(200810 Day 18)

樣板來源

Template Source

2020 iT邦幫忙鐵人賽 Day18 網頁前端-刻意練習(履歷表#3)